<!--
 * @Author: Jackie
 * @Date: 2021-08-22 02:08:46
 * @LastEditors: Jackie
 * @LastEditTime: 2021-10-15 10:01:26
 * @Description:
-->
<template>
  <div class="todolist">
    <div class="top">
      <span>ToDoList</span>
      <el-input
        v-model="inputVal"
        placeholder="please input"
        @keyup.enter.native="handleDoing"
      />
    </div>
    <div class="doing">
      <div class="doing-top">
        <h2>正在进行</h2>
        <span class="doing-count">{{ doingList.length }}</span>
      </div>
      <ul class="doing-wrapper">
        <li v-for="(item, index) in doingList" :key="index" class="doing-item">
          <el-checkbox
            :checked="!item.flag"
            @change="handleCheckedChange(index, item)"
          />
          {{ item.label }}
          <span class="doing-del" @click="handleDelDoing(index)">-</span>
        </li>
      </ul>
    </div>
    <div class="done">
      <div class="done-top">
        <h2>已经完成</h2>
        <span class="done-count">{{ doneList.length }}</span>
      </div>
      <ul class="done-wrapper">
        <li v-for="(item, index) in doneList" :key="index" class="done-item">
          <el-checkbox
            :checked="!item.flag"
            @change="handleCheckedChange(index, item)"
          />
          {{ item.label }}
          <span class="done-del" @click="handleDelDone(index)">-</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'todolist',
})
export default class extends Vue {
  inputVal: string = ''
  doingList: Array<{ label: String; flag: Boolean }> = [
    { label: '睡觉', flag: true },
  ]
  doneList: Array<{ label: String; flag: Boolean }> = [
    { label: '敲代码', flag: false },
  ]

  /* 输入框回车添加正在进行的事 */
  public handleDoing(): void {
    this.doingList.push({ label: this.inputVal, flag: true })
    this.inputVal = ''
  }
  /* 删除正在进行的事 */
  public handleDelDoing(e: number): void {
    this.doingList.splice(e, 1)
  }
  /* 删除已经完成的事 */
  public handleDelDone(e: number): void {
    this.doneList.splice(e, 1)
  }
  /* 点击复选框 */
  public handleCheckedChange(
    t: number,
    v: { label: string; flag: boolean }
  ): void {
    console.log(v)
    if (v.flag) {
      this.doingList[t].flag = false
      this.doingList.splice(t, 1)
      this.doneList.push(v)
    } else {
      this.doneList[t].flag = true
      this.doneList.splice(t, 1)
      this.doingList.push(v)
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.todolist {
  width: 800px;
  height: 500px;
  margin: 10px auto;
  border: 1px solid #ccc;
  background-color: rgb(205, 205, 205);
}
.todolist > .top {
  background-color: rgb(50, 50, 50);
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top > span {
  color: rgb(221, 221, 221);
  font-size: 20px;
  display: block;
  margin-right: 50px;
}
.top > .el-input {
  width: 400px;
}
.doing,
.done {
  width: 65%;
  margin: 20px auto;
}
.doing-top,
.done-top {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-self: center;
}
.doing-top > .doing-count,
.done-top > .done-count {
  display: block;
  background-color: #fff;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  font-size: 18px;
}
.doing-wrapper,
.done-wrapper {
  width: 90%;
  margin: 0 auto;
}
.doing-wrapper > .doing-item {
  margin-bottom: 5px;
  background-color: #fff;
  border-left: 5px solid skyblue;
  height: 30px;
  line-height: 30px;
  padding-left: 5px;
}
.done-wrapper > .done-item {
  background-color: rgb(124, 124, 124);
  border-left: 5px solid rgb(148, 148, 148);
  height: 30px;
  line-height: 30px;
  margin-bottom: 5px;
  padding-left: 5px;
}
.doing-item > .doing-del,
.done-item > .done-del {
  float: right;
  margin-right: 10px;
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
}
</style>
